<template>
  <div class="chart-page">
    <h2>横向柱状图示例</h2>
    <div ref="chartRef" class="echarts-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 注意路径！根据你的实际目录调整
import { initHorizontalBar } from '../util/barchart'; 

const chartRef = ref(null);
let disposeChart = () => {}; 

// 直接写死测试数据（一维）
const chartData = {
  categories: ['周一', '周二', '周三'], // Y 轴类目
  values: [28, 26, 25] // X 轴数值（一维）
};

onMounted(() => {
  if (chartRef.value) {
    // 初始化横向柱状图
    disposeChart = initHorizontalBar(chartRef.value, chartData);
  }
});

onUnmounted(() => {
  // 销毁图表
  disposeChart();
});
</script>

<style scoped>
.echarts-container {
  width: 600px;
  height: 400px; 
}

.chart-page {

}
</style>